import React from 'react';
import { connect } from 'dva/index';
import { Col, Form, Icon, Radio, Table } from 'antd';
import SendOrder from './SendOrder';
import DescriptionList from '../../../../components/DescriptionList/DescriptionList';
import Description from '../../../../components/DescriptionList/Description';
import ExceptionModel from './ExceptionModel';
import OrderEssentialInfo from '../../../workorder/logistics/components/OrderEssentialInfo';
import OrderTrailerInfo from '../../../workorder/trailer/components/OrderTrailerInfo';
import DeclareInfoWord from '../../../workorder/customs/components/DeclareInfoWord';

let sendOrder: any = {};
let exceptionModel: any = {};
let orderEssentialInfo: any = {};
let orderTrailerInfo: any = {};
let declareInfoWord: any = {};

const SendOrderList = Form.create()(
  class CreateForm extends React.Component {
     state: {
      salesType: '';
    };

    // eslint-disable-next-line no-useless-constructor
    constructor(props: any) {
      super(props);
      // @ts-ignore
      this.state = { salesType: '1' };
    }


    checkOrderSupplementInfo = () => {}

    handleChangeSalesType = (e :any) => {
      const { target } = e;
      this.setState({
        salesType: target.value,
      });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form


      // 增值工作单
      const valueAddedColumns = [
        { title: '服务单号', dataIndex: 'serviceNo', key: 'serviceNo  ' },
        { title: '增值工作单号', dataIndex: 'workNo', key: 'workNo' },
        { title: '客户名称', dataIndex: 'companyName', key: 'companyName' },
        { title: '手机号码', dataIndex: 'mobile', key: 'mobile' },
        { title: '总金额', dataIndex: 'total', key: 'total' },
        { title: '状态',
          dataIndex: 'status',
          key: 'status',
          render: (text:any, record:any) => <span style={{ color: 'red' }}>{text}</span>,
        },
        {
          title: '操作',
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          render: (record: any) =>
            <span>
               <a href="#"
                  onClick={() => {
                    if (sendOrder) sendOrder.handleOpen();
                  }}
               >派单</a>
              <div className="ant-divider" />
              <a href="#">详情</a>
           </span>,
        },
      ];

      const valueAddedData = [
        {
          key: '1',
          id: 1,
          serviceNo: 'zbt51591',
          workNo: 'B61455',
          type: '产地证',
          companyName: '广州市联邦有限公司',
          mobile: '18688858151',
          email: 'email@163.com',
          total: '1564CNY',
          status: '处理中',
          creator: '刘曾荣',
          creatTime: '2019-06-01',
          gdUser: '刘亦菲',
        },
      ];

      // @ts-ignore
      const valueAddedTable = <Table loading={this.props.loading} rowKey="id" dataSource = {valueAddedData} columns={valueAddedColumns} bordered size="middle"/>;


      // @ts-ignore
      // eslint-disable-next-line no-underscore-dangle
      const _html = this.state.salesType === '1' ?
        <DescriptionList className={{}} size="large" title="物流工作单" style={{ marginBottom: 32 }} >
          <Description term="物流工作单号"><a href="#" onClick={() => { if (orderEssentialInfo) orderEssentialInfo.handleOpen(); }}>BC156156</a></Description>
          <Description term="服务类型">空运</Description>
          <Description term="商品名">空运快递</Description>
          <Description term="客户名称">林科技</Description>
          <Description term="起始港">广州-黄埔</Description>
          <Description term="目的港">纳扎尔别克</Description>
          <Description term="总金额">2500CNY</Description>
          <Description term="进度"><a href="#" onClick={() => { if (sendOrder) sendOrder.handleOpen(); }} style={{ color: 'red' }}>待派单</a></Description>
          <Description term="状态">正常</Description>
        </DescriptionList>
        :
        <div>
          <DescriptionList className={{}} size="large" title="物流工作单" style={{ marginBottom: 32 }} >
            <Description term="物流工作单号"><a href="#" onClick={() => { if (orderEssentialInfo) orderEssentialInfo.handleOpen(); }}>BC156156</a></Description>
            <Description term="服务类型">空运</Description>
            <Description term="商品名">空运快递</Description>
            <Description term="客户名称">林科技</Description>
            <Description term="起始港">广州-黄埔</Description>
            <Description term="目的港">纳扎尔别克</Description>
            <Description term="总金额">2500CNY</Description>
            <Description term="进度">补料</Description>
            <Description term="状态">正常</Description>
          </DescriptionList>
          <DescriptionList className={{}} size="large" title="拖车工作单" style={{ marginBottom: 32 }}>
            <Description term="拖车工作单号"><a href="#" onClick={() => { if (orderTrailerInfo) orderTrailerInfo.handleOpen(); }}>TA7848949</a></Description>
            <Description term="服务类型">整柜</Description>
            <Description term="商品名">拖车</Description>
            <Description term="客户名称">林科技</Description>
            <Description term="起始港">广州-黄埔</Description>
            <Description term="总金额">7500CNY</Description>
            <Description term="进度">拖车中</Description>
            <Description term="状态"><a href="#" style={{ color: 'red' }} onClick={() => { if (exceptionModel) exceptionModel.handleOpen(); }}>异常</a></Description>
          </DescriptionList>

          <DescriptionList className={{}} size="large" title="报关工作单" style={{ marginBottom: 32 }}>
            <Description term="报关工作单号"><a href="#" onClick={() => { if (declareInfoWord) declareInfoWord.handleOpen(); }}>CUS5891155</a></Description>
            <Description term="商品名">报关</Description>
            <Description term="客户名称">林科技</Description>
            <Description term="出货港口">广州-黄埔</Description>
            <Description term="总金额">6500CNY</Description>
            <Description term="进度">已完成</Description>
            <Description term="状态">正常</Description>
          </DescriptionList>

          <DescriptionList className={{}} size="large" title="保险工作单" style={{ marginBottom: 32 }}>
            <Description term="保险工作单号"><a href="#">BG61455</a></Description>
            <Description term="保险种类">货运险</Description>
            <Description term="客户名称">刘一鸣</Description>
            <Description term="保险金额">985742CNY</Description>
            <Description term="保险费">948CNY</Description>
            <Description term="联系人">刘曾荣</Description>
            <Description term="手机号码">15521348845</Description>
            <Description term="进度">投保中</Description>
            <Description term="状态">正常</Description>
          </DescriptionList>

          <Col md={24} sm={24} style={{ paddingBottom: 10 }}>
                <span style={{ fontWeight: 'bold', fontSize: 17, marginBlock: '500px' }}>
                  <Icon type="tag" theme="twoTone" />增值工作单
                </span>
          </Col>
          {valueAddedTable}
        </div>;

      // @ts-ignore
      return (
        <div>
          <Col md={24} sm={24} style={{ paddingBottom: 10 }}>
          {/* eslint-disable-next-line react/jsx-no-bind,max-len */}
            <Radio.Group value={this.state.salesType} onChange={this.handleChangeSalesType.bind(this)}>
              <Radio.Button value="1">待派单</Radio.Button>
              <Radio.Button value="2">跟单</Radio.Button>
            </Radio.Group>
          </Col>

          {_html}

          {/* 派单 */}
          {/* eslint-disable-next-line no-return-assign */}
          <SendOrder wrappedComponentRef={(inst: any) => (sendOrder = inst)}
                         {...sendOrder}
          />

          {/* 异常 */}
          {/* eslint-disable-next-line no-return-assign */}
          <ExceptionModel wrappedComponentRef={(inst: any) => (exceptionModel = inst)}
            {...exceptionModel}
            />

            {/* 物流订单详情 */}
          {/* eslint-disable-next-line no-return-assign */}
          <OrderEssentialInfo wrappedComponentRef={(inst: any) => (orderEssentialInfo = inst)}
                              {...orderEssentialInfo}
                              visible
          />

          {/* 拖车 */}
          {/* eslint-disable-next-line no-return-assign */}
          <OrderTrailerInfo wrappedComponentRef={(inst: any) => (orderTrailerInfo = inst)}
                            {...orderTrailerInfo}
                            visible
          />

          {/* 报关 */}
          {/* eslint-disable-next-line no-return-assign */}
          <DeclareInfoWord wrappedComponentRef={(inst: any) => (declareInfoWord = inst)}
                           {...declareInfoWord}
                           visible
          />
        </div>
      )
    }
  })

function mapStateToProps(state: any) {
    return {
      loading: state.loading.models.order, order: state.order,
    };
}

export default connect(mapStateToProps)(SendOrderList);
